<template>
    <div>
        <img src="/public/meeting.png" alt="" class="meeting">
        <van-form>
            <div class="login">
                <van-cell-group inset>
                    <van-icon name="user" class="usericon" color="rgb(210, 210, 210)" />
                    <van-field v-model="phone" name="用户名" placeholder="登录账号" :rules="[{ required: true, message: '' }]"
                        class="phone" />
                    <van-icon name="lock" class="lockicon" color="rgb(210, 210, 210)" />
                    <van-field v-model="common_pwd" name="密码" :type="checked ? 'text' : 'password'" placeholder="登录密码"
                        :rules="[{ required: true, message: '' }]" class="common_pwd" />
                    <t-switch v-model="checked" :label="['开', '......']" class="change" type="password"></t-switch>
                </van-cell-group>
            </div>
            <div style="margin:20px;">
                <van-button round block type="primary" native-type="submit" style="border-radius: 10px;"
                    @click="onResgisLogin">
                    登录
                </van-button>
            </div>
            <p class="forgetpwd" @click="forgetPwd">忘记登录密码</p>
        </van-form>
    </div>
</template>
<script setup>
import { ref} from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/store';
import http from '../http';
const userStore = useUserStore();
const router = useRouter()
const checked = ref(true);
let phone = ref('')
let common_pwd = ref('')

function onResgisLogin() {
    const data = {
        phone: phone.value,
        common_pwd: common_pwd.value
    }
    http.post('/patient/register_login/', data).then(res => {
        if (res.data.code == 200) {
            console.log("请求成功", res.data);
            let account = {'account': phone.value }
            userStore.setUserAccount(phone.value)
            console.log("用户名保存成功", account);
            localStorage.setItem('reginame', phone.value);
            localStorage.setItem('token', res.data.token);
            router.push('/index')
            alert(res.data.msg)
        } else {
            alert(res.data.msg)
        }
    }).catch(err => {
        console.log("请求失败", err);
    })
}

function forgetPwd() {
    router.push('/resetpwd')
}

</script>
<style scoped>
.meeting {
    width: 80%;
    height: 40%;
    margin-top: 30px;
    margin-left: 10%;
}

.login {
    position: relative;
    border: 1px solid rgb(230, 230, 230);
    margin: 0 20px;
}

.usericon {
    position: absolute;
    top: 15px;
    left: 30px;
}

.lockicon {
    position: absolute;
    top: 60px;
    left: 30px;
}

.uname,
.pwd {
    margin-left: 40px;
}

.change {
    position: absolute;
    top: 65%;
    right: 15%;
    width: 50px;
}

.forgetpwd {
    color: rgb(0, 119, 255);
    text-align: center;
}
</style>